<template>
   <div id="app">
    <div id="nav">
      <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <img src="https://z3.ax1x.com/2021/08/24/hAFdYD.jpg" style="float:left;margin-right:50px" @click="doImage">

  <el-menu-item index="/onlineServer">网站首页</el-menu-item>
 <el-submenu index="/news/2">
    <template slot="title"><span @click="news(2,8)">集团概况</span></template>
    <el-menu-item index="/news/2/8">集团简介</el-menu-item>
    <el-menu-item index="/news/2/10">CI形象</el-menu-item>
    <el-menu-item index="/news/2/12">组织结构</el-menu-item>
    <el-menu-item index="/news/2/9">董事长致辞</el-menu-item>
    <el-menu-item index="/news/2/11">武水史话</el-menu-item>
    <el-menu-item index="/news/2/13">社会责任</el-menu-item>
  
</el-submenu>

<el-submenu index="3">
    <template slot="title"><span @click="news(3,14)">新闻中心</span></template>
     <el-menu-item index="/news/3/14">武水热点</el-menu-item>
    <el-menu-item index="/news/3/15">基层动态</el-menu-item>
  
</el-submenu>



  <el-submenu index="4">
    <template slot="title"><span @click="news(4,16)">党群工作</span></template>
     <el-menu-item index="/news/4/16">企业党建</el-menu-item>
    <el-menu-item index="/news/4/118">党风廉政</el-menu-item>
       <el-menu-item index="/news/4/21">职工艺苑</el-menu-item>
       <el-menu-item index="/news/4/17">工会工作</el-menu-item>
       <el-menu-item index="/news/4/20">青年园地</el-menu-item>
       <el-menu-item index="/news/4/22">学习资料</el-menu-item>

</el-submenu>




  
  <el-submenu index="5">
    <template slot="title"><span @click="news(5,32)">网上营业厅</span></template>
     <el-menu-item><span @click="waterChargeQuery()">水费查询</span></el-menu-item>
    <el-menu-item><span @click="payment()">用户缴费</span></el-menu-item>
       <el-menu-item index="/news/5/32">收费标准</el-menu-item>
       <el-menu-item><span @click="getBill()">电子发票申领</span></el-menu-item>
       <el-menu-item><span @click="addAndRepair()">网上报修</span></el-menu-item>
       <el-menu-item><span @click="repairAndAdd()">网上报装</span></el-menu-item>
       <el-menu-item index="/news/5/24">停水公告</el-menu-item>
       <el-menu-item index="/news/5/31">客户须知</el-menu-item>

</el-submenu>
   <el-submenu index="6">
    <template slot="title"><span @click="news(6,38)">咨询服务</span></template>
    <el-menu-item index="/news/6/38">咨询投诉</el-menu-item>
    <el-menu-item index="/news/6/29">用水指南</el-menu-item>
    <el-menu-item index="/news/6/39">供水热线</el-menu-item>
    <el-menu-item index="/news/6/23">营业网点查询</el-menu-item>
    <el-menu-item index="/news/6/40">水小宝课堂</el-menu-item>
    <el-menu-item index="/news/6/28">水价纵横</el-menu-item>
</el-submenu>




   <el-submenu index="7">
    <template slot="title"><span @click="news(7,36)">政策法规</span></template>
    <el-menu-item index="/news/7/36">地方法规</el-menu-item>
    <el-menu-item index="/news/7/37">国家法规</el-menu-item>
</el-submenu>


</el-menu>


<el-main>
  <div v:model="nowTime" style=" background-color:#F7F8FA">{{nowTime}} 欢迎来到右江水务</div>
       
        <el-carousel indicator-position="outside" height="400" >
         <el-carousel-item v-for="item in items" :key="item.src">
        
          <h3> <img :src="item.src" ></h3>
          </el-carousel-item>
         </el-carousel>
 

      </el-main>
<router-view/>
    </div>
  
  </div>  
</template>
   

//// <script>
// export default {
//  name:"App",

//  data(){                        
//    return{
//      path:'',
//      activeIndex:"/",
//      nowTime:"",
//      loginForm:false,
//      form:{
//        name:"",
//        password:""
//      },
//      formLabelWidth: '120px',
//      items:[{src:"https://z3.ax1x.com/2021/08/24/hAkG9g.jpg"},
//             {src:"https://z3.ax1x.com/2021/08/24/hAk1N8.jpg"},
//             {src:"https://z3.ax1x.com/2021/08/24/hAk34S.jpg"},
//             {src:"https://z3.ax1x.com/2021/08/24/hAklAf.jpg"}
//      ]
//    }
//  },
//  methods:{
//    handleSelect(){

//    },
//    //跳转缴费页面
//   payment(){
//     console.log("=============");
//     this.$router.push("/payment");
//   },
// // 登录用户接口
//   goLogin(){
    
//     this.loginForm=false,
//     console.log(this.form)
//     this.from=""
//   }
  
//  },
//  mounted(){//页面加载完后显示日期
//    this.nowTime=new Date().toLocaleDateString();
//   //  console.log(this.nowTime)
//    this.nowTime;
//   //  this.path = this.$route.path;
//  },

// }
// </script>




<script>
export default {
 name:"App",
 
 data(){                        



   return{
     activeIndex:"/",
     nowTime:"",
     items:[{src:"https://z3.ax1x.com/2021/08/24/hAkG9g.jpg"},
            {src:"https://z3.ax1x.com/2021/08/24/hAk1N8.jpg"},
            {src:"https://z3.ax1x.com/2021/08/24/hAk34S.jpg"},
            {src:"https://z3.ax1x.com/2021/08/24/hAklAf.jpg"}
     ]
   }
 },
 methods:{
   handleSelect(){

   },
    payment(){
    this.$router.push("/payment");
  },
  waterChargeQuery(){
    this.$router.push("/waterChargeQuery");
  },
  getBill(){
    this.$router.push("/getBill");
  },
  addAndRepair(){
    this.$router.push("/addAndRepair");
  },
  repairAndAdd(){
    this.$router.push("/repairAndAdd");
  },
    news(id,uid){
     this.$router.push("/news/"+id+"/"+uid);
   },
   doImage(){
     this.$router.push("/onlineServer");
   }
  
 },
 mounted(){
   this.nowTime=new Date().toLocaleDateString();
   console.log(this.nowTime)
   this.nowTime
 }
}
</script>



<style>


    .el-carousel__item h3 {


    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin-left: 110px;
   
  }
  /*
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  } */
 /* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
} */

#nav {
  padding: 30px;
  height: 150px;
}

/* #nav a {
  font-weight: bold;x
  color: #2c3e50;
} */

/* #nav a.router-link-exact-active {
  color: #42b983;
}  */
</style>
